<template>
	<div>
		<div class="head1">
			<img :src="bgimg" class="bgimg" />
			<div class="text1">
				<h3>{{bgtext}}</h3>
				<p>{{bgtext2}}</p>
			</div>
		</div>
		<div v-show="false">{{this.$route.query.id}}</div>
		<div v-html="bodytext" class="bodytext"></div>
	</div>
</template>

<script>
	export default {
		
		created: function() {
			this.$axios({
				url: "http://192.168.10.50/daily/index.php/Home/daily/detail",
				methods: "get",
				params: {
					id: this.$route.query.id
				}
			}).then((res) => {
				// console.log(res);
				this.bgimg = res.data.image
				this.bgtext = res.data.title
				this.bgtext2 = res.data.image_source
				this.bodytext = res.data.body
			})
		},
		updated:function(){
			this.$axios({
				url: "http://192.168.10.50/daily/index.php/Home/daily/detail",
				methods: "get",
				params: {
					id: this.$route.query.id
				}
			}).then((res) => {
				// console.log(res);
				this.bgimg = res.data.image
				this.bgtext = res.data.title
				this.bgtext2 = res.data.image_source
				this.bodytext = res.data.body
			})
		},
		data() {
			return {
				bgimg: "",
				bgtext: "",
				bgtext2: "",
				bodytext: "",
			}
		},
	}
</script>

<style scoped="scoped">
	@import url("../assets/css/index.css");

	.head1 {
		width: 100%;
		position: relative;
	}

	.text1 {
		width: 100%;
		position: absolute;
		bottom: 40px;
		left: 0px;
		padding: 10px;
	}

	.head1 h3 {
		color: white;
	}

	.head1 p {
		color: #EAEAEA;
		font-size: 14px;
		position: absolute;
		right: 30px;
	}

	.bgimg {
		width: 100%;
		height: 350px;
	}

	.bodytext {
		padding: 20px 10px;
	}
</style>
